{% extends 'manage.html' %}
{% load static %}
{% block css %}


  <link rel="stylesheet" href="{% static 'plugin/editor-md/css/editormd.min.css' %}">


  <style>
    .panel-default{
        margin-top: 10px;
    }
    .panel-default .panel-heading {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }
    .panel-body{
        padding: 0px;
    }

      .title-list{
        border-right: 1px solid #dddddd;
        min-height: 500px;
    }

    .title-list ul {
            padding-left: 15px;
        }

    .title-list ul a {
            display: block;
            padding: 5px 0;
        }
    .content{
        border-left: 1px solid #dddddd;
        min-height: 600px;
        margin-left: -1px;
    }
  </style>
{% endblock %}

{% block content %}
  <div class="container-fluid">

  <div class="panel panel-default">
  <div class="panel-heading">
    <div>
    <i class="fa fa-book" aria-hidden="true"></i> wiki文档:
    </div>
    <div class="function">
                    <a type="button" class="btn btn-success btn-xs"
                       href="{% url 'web_wiki_add' project_id=request.tracer.project.id %}">
                        <i class="fa fa-plus-circle" aria-hidden="true"></i> 新建
                    </a>
      </div></div>
  <div class="panel-body">
    <div class="col-sm-3 title-list">
       <ul id="catalog">

      </ul>

    </div>
    <div class="col-sm-9 content">

                      <form method="post">
                        {% csrf_token %}
                        {% for field in form %}
                          {% if field.name == 'content' %}
                           <div class="form-group">
                  <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                             <div id="editor">
                                 {{ field }}
                             </div>
                <span class="error-msg">{{ field.errors.0 }}</span>
                             </div>
                          {% else %}
                            <div class="form-group">
                  <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                  {{ field }}
                <span class="error-msg">{{ field.errors.0 }}</span>
                </div>
                          {% endif %}
                     {% endfor %}

                <button type="submit" class="btn btn-primary">提 交</button>
              </form>

    </div>
    <div></div>
  </div>
</div>


  </div>
{% endblock %}



{% block js %}
  	<script src="{% static 'plugin/editor-md/editormd.min.js' %}"></script>
  <script>
     var WIKI_DETAIL_URL = "{% url 'web_wiki' project_id=request.tracer.project.id %}";
     var WIKI_UPLOAD_URL = "{% url 'web_wiki_upload' project_id=request.tracer.project.id %}";
     $(function (){
         initCatalog();
         initEditorMd();
     });
     /*markdown编辑器初始化 textarea转变成编辑器*/
     function initEditorMd(){
         editormd('editor',{
             placeholder:"请输入内容",
             height:500,
             path:"{% static 'plugin/editor-md/lib/' %}",
             imageUpload:true,
             imageFormats:["jpg",'jpeg','png','gif','JPG'],
             imageUploadURL:WIKI_UPLOAD_URL

         })
     };




     function initCatalog(){
         $.ajax({
             url:"{% url 'web_wiki_catalog' project_id=request.tracer.project.id %}",
             type:"GET",
             dataType:"JSON",
             success:function (res){
                 console.log (res);
                 if(res.status){
                    $.each(res.data, function (index,item) {
                         var href = WIKI_DETAIL_URL+"?wiki_id="+item.id;
                         var li = $("<li>").attr('id',"id_" + item.id).append($('<a>').text(item.title).attr('href',href) ).append($('<ul>'));
                          if(!item.parent_id){
                              //添加到自己打catalog里面

                              $('#catalog').append(li);
                          }else{

                              $("#id_"+ item.parent_id).children('ul').append(li);
                          }
                    })
                 }else{
                     alert("初始化目录失败")
                 }

             }
         })
     };

  </script>
{% endblock %}